<!-- subpkg_consult/order_list/components/order-list.vue -->
<script lang="ts" setup>
import { orderListApi } from '@/apis/order'
import type { OrderItem } from '@/types/order'
import { ref } from 'vue'

// 1. 基于类型 获取 订单的列表
const props = defineProps<{ type: number }>()
// 页码
const current = ref(1)
// 页容量
const pageSize = 5
// 订单列表
const orderList = ref([] as OrderItem[])
const getOrderList = async () => {
  const res = await orderListApi({
    current: current.value + '',
    pageSize: pageSize + '',
    type: props.type + '',
  })
  // console.log(res)
  // 后续触底加载更多时，现有的基础上进行拼接
  orderList.value.push(...res.rows)

    // 判断是否还有更多数据
    if (orderList.value.length >= res.total) {
    // 已经全部加载完毕了
    hasMore.value = false
    // 修改状态变量为 noMore loading 组件就变了
    loadingStatus.value = 'noMore'
  } else {
    // 还可以加载更多
    current.value++
  }
  console.log(orderList)
}

getOrderList()

// 是否还有更多数据，默认为 true
const hasMore = ref(true)
const loadingStatus = ref('loading')
const loadMoreData = () => {
  // 还有数据，就继续加载，木有数据了，修改状态变量
  if (hasMore.value == true) {
    getOrderList()
    console.log('加载更多')
  }
}

// 2. 刷新数据
const isRefresh = ref(false)
const refreshData = async () => {
  console.log('下拉刷新')
  isRefresh.value = true
  // setTimeout(() => {
  //   isRefresh.value = false
  // }, 2000)

  // 清空之前的数据
  orderList.value = []
  // 获取 第一页的数据
  current.value = 1
  await getOrderList()
  // 等待数据获取完毕之后 再修改状态
  isRefresh.value = false
}
</script>

<template>
  <!-- refresherrefresh刷新事件
       refresher-triggered 是否正在刷新 
  -->
  <scroll-view :refresher-triggered="isRefresh" @refresherrefresh="refreshData" @scrolltolower="loadMoreData" 
  refresher-enabled refresher-background="#f6f6f6" class="uni-scroll-view" scroll-y>
    <view class="consult-list">
      <view v-for="item in orderList" :key="item.id" class="consult-list-item">
        <view class="consult-header">
          <view class="label">
            <image class="doctor-avatar" src="/static/uploads/doctor-avatar.jpg" />
            <text>{{ item.typeValue }}（自动分配医生）</text>
          </view>
          <text class="status color-1">咨询中</text>
        </view>

        <navigator class="consult-body" hover-class="none" url="/subpkg_consult/order_detail/index">
          <uni-list :border="false">
            <uni-list-item :border="false" title="病情描述" :right-text="item.illnessDesc" />
            <uni-list-item :border="false" title="价格" :right-text="`¥ ${item.payment}.00`" />
            <uni-list-item :border="false" title="创建时间" :right-text="item.createTime" />
          </uni-list>
        </navigator>

        <view class="consult-footer">
          <button class="uni-button minor">取消订单</button>
          <button class="uni-button">继续支付</button>
        </view>
      </view>


      <!-- 加载状态 -->
      <uni-load-more
        :status="loadingStatus"
        color="#C3C3C5"
        :icon-size="16"
        :content-text="{
          contentdown: '上拉显示更多',
          contentrefresh: '数据正在加载中',
          contentnomore: '没有更多数据了',
        }"
      />
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import './styles.scss';
</style>
